<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>一生平安-健康知识家</title>
<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-scroll.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-bar.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/dynamicPic.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/mobile.css" />
	<link type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.min.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery-1.6.4.min.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessage=false;
		$.mobile.selectmenu.prototype.options.nativeMenu = false;
		$.mobile.defaultPageTransition="none";
		$.mobile.listview.prototype.options.filterPlaceholder="";
	});
	</script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile-common.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/dynamicPic.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.i8n.CHN-S.utf8.js"></script>
</head>
<body>
	<div data-role="page" id="mobile-hpKnowledge-page" class="page-div-style">
		<script>
		$('#mobile-hpKnowledge-page').live('pagebeforeshow',function(){
			//加载等待
			showLoadPage();
			
			//显示头部栏
	 		initHeader($("#mobileHPKnowledgeListHeader"),"back");
			//显示功能列表的头部标题名称
			$("#mobileHPKnowledgeListHeader").find("[name='mobileHeaderTitle']").text("健康知识家");
	 		
			$("#mobileHPKnowledgeBar").empty();
           	
           	//清空列表
	 		$("#hpKnowledgeListUl").empty();
			
			//更新数据
			getListData(1,'1');
		});
		
		$("#mobile-hpKnowledge-page").live("pageshow",function(){
			$("#mobileHPKnowledgeListWrapper")[0].style.height = window.innerHeight
				- $("#mobileHPKnowledgeListHeader").height() - 50 +"px";
			initScroll({
				"wrapper": "mobileHPKnowledgeListWrapper", //滚动组件的id
				"dir": "y", //滚动的方向，x或者y
				"bounce": false, //是否限制超出边界，默认为false
				"scrollExBottomHandler": function(backToBottom){
					backToBottom.call();
					if(window.pageNum == window.pageCount){
						return;
					}
					nextPage(getListData);
				},
				"scrollExTopHandler": function(backToTop){
					$("#hpKnowledgeListUl").find(".li_load").remove();
					$("#hpKnowledgeListUl").prepend("<li class=\"text_style text_pointer li_load\" >"
						+ "<img src=\"${ctx}/lib/mobile/image/load.gif\">"
						+ "<p>加载中...</p></li>");
					getListData(1,'up');
					backToTop.call();
				},
				"scrollingExBottomHandler": function(y){},
				"scrollingExTopHandler": function(y){}
			});
			
			scrollToTop("mobileHPKnowledgeListWrapper");
			//刷新滚轮
			resetScrollBar("mobileHPKnowledgeListWrapper");
		});
		
		//获得数据 type 1:页面初始化
		function getListData(page,type){
			// 下滑加载显示等待
			if(type!="up"){
				//加载等待
				showLoadPage();
			}
			
			//类别
			var knowledgeType = $("#knowledgeType").val();
			//当前页
			page = (typeof page=="number")?page:1;
			//ajax获取待办工单
			var arg = [showScroll,type];//包含函数和参数的数组
			//获取列表信息
			getHPKnowledgeListData(arg,page,knowledgeType);
            window.pageNum = page;
		}
		
		//组织显示 菜单的功能列表
		function showScroll(data,arg)
		{
           	var type = arg[1];
           	if(type=="up"){
           		//清空列表
		 		$("#hpKnowledgeListUl").empty();
		 		window.li_div_active=1;
           	}
			if(data.code == "0"){
	           	window.pageCount = 1 * (data.total || 1);
	           	
	          	//组织显示活动公告列表ul
				showHPKnowledgeList(data.rows,$("#hpKnowledgeListUl"));
	  			
	  			//判断 当前列表显示的高度是否 小于 滚屏Wrapper区域的高度
	  			if($("#mobileHPKnowledgeListScroller").height() <= $("#mobileHPKnowledgeListWrapper").height()){
	  				nextPage(getListData);
	  			}
	  			
	  			if(window.pageNum >= 1){
					//刷新滚轮
					resetScrollBar("mobileHPKnowledgeListWrapper");
	  			}
	        }else if(data.nResult == "-99"){
     			//session失效
      			//backSessionError(data.message);
      		}else{
      			//加载失败
      			//loadingFail();
      		}
      		
      		//结束等待
			hideLoadPage();
		}
		window.li_div_active=1;
		//组织显示活动公告列表ul
		function showHPKnowledgeList(jsonRows,$ul){
  			if(jsonRows.length != 0){
				//已读的活动公告ID串
				var hpKnowledgeIds = "" + window.localStorage.getItem("hpKnowledgeIds");
				for(var i = 0 ; i < jsonRows.length ; i++){
	  				var li_title = jsonRows[i].title;//标题
	  				var li_create_date = jsonRows[i].create_date;//创建时间
	  				li_create_date = formatDate(li_create_date);
	  				var li_id = jsonRows[i].rowid;//id
					//判断是否已读
					var isView = false;
					if(hpKnowledgeIds.indexOf("," + li_id) != -1){
						isView = true;
					}
					
					var li = $("<li class=\"text_style text_pointer\"></li>");
					var table = $("<div align='center'><div class='li_div "+(window.li_div_active == 1?"li_div_active":"")+"'><table>"
						+ "<tr><td name=\"title\" style=\"\"><p style=\"width:" 
						+ (window.innerWidth - 150) + "px\" class=\"p_desc\">" + li_title + "</p></td>"
						+"<td align=\"right\"><a class=\"text_time_style\">" + li_create_date + "</a></td></tr></table><div><div>");
					li.append(table);
							
					//工作动态详情
					table.addEventListener("quickClick",function(arg,obj){
						return function(){
							$("#hpKnowledgeListUl .li_div").removeClass("li_div_active");
							obj.find(".li_div").addClass("li_div_active");
							window.location.href = "${ctx}/mobile/yspaInterface/showHPKnowledge.html?hpKnowledgeId=" + arg.rowid;
						};
					}(jsonRows[i],table));
					$ul.append(li);
					
					window.li_div_active++;
				}
			}
			$ul.listview('refresh');
		}
		
		function change(){
			//更新数据
			getListData(1,'up');
			scrollToTop("mobileHPKnowledgeListWrapper");
			//刷新滚轮
			resetScrollBar("mobileHPKnowledgeListWrapper");
		}
		</script>
		<div style="position:absolute;width:100%;height:100%;top:0;display:none;z-index:100;" id="loginWait">
			<div style="position:absolute;height:100%;width:100%;top:0;">
				<div style="top:40%;height:90px;border-radius:8px;-webkit-box-shadow:1px 1px 1px #ccc;
					background:#ffffff;text-align:center;opacity:0.8;position: absolute;
					z-index: 100;left: 50%;width: 200px;margin-left: -130px;margin-top: -35px;padding: 10px 30px;">
					<img id="load_img" src="${ctx}/lib/mobile/image/load.gif" style="position:relative;">
					<p id="load_content" style="position:relative;">加载中...</p>
				</div>
			</div>
		</div>
		<div data-role="header" data-position="" data-backbtn="false" data-theme="b" id="mobileHPKnowledgeListHeader">
		</div>
		<div style="height: 50px;
		    width: 100%;
		    top: 50px;
		    position: relative;
		    background-color: #5FC9BD;" align="center">
				<form id="form" method="post" action="${ctx}/mobile/yspaInterface/foodcalorList.html?classcd=${classcd}" data-ajax="false">
					<table style="width: 80%;height: 50px;">
						<tr>
							<td style="text-shadow: 0 0 0;
	    font-family: 黑体;
	    font-size: 18px;
	    width: 50px;">类别</td>
							<td>
								<select name="knowledgeType" id="knowledgeType" data-role="none" style="width: 80%; 
								    height: 30px;
								    font-family: 黑体;
								    border-radius: 8px;
								    background-color: white;" onchange="change()">
									<option value="">全部</option>
									<option value="1">文章</option>
									<option value="2">影片</option>
									<option value="3">连结</option>
									<option value="5">健康食谱</option>
									<option value="6">医检机构</option>
									<option value="7">用药知识</option>
								</select>
							</td>
						</tr>
					</table>
					</form>
		</div>
		<div data-role="content" id="mobileHPKnowledgeListWrapper" style="padding:0;background: white;" class="jszx-wrapper">
			<div id="mobileHPKnowledgeListScroller" class="jszx-scroller" style="">
				<ul data-role="listview" style="" id="hpKnowledgeListUl" class="ui-btn-corner-all ul_rxjj">
				</ul>
			</div>
		</div>
	</div>
</body>
</html>